<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>态势感知</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">

    <style>
        #myModal2 .scroll-content td {
            height: auto;
            padding: 8px 0;
        }
    </style>
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">
        <!-- 暂无数据 -->
        <div class="modal fade" id="myPrompt">
            <div class="modal-dialog" style="width:600px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">温馨提示</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-prompt">
                            <img src="../src/img/noData.png" alt="">
                            <!-- <img src="../src/img/noData2.png" alt=""> -->
                            <span>暂无数据~ </span>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button class="a-btn" data-dismiss="modal">返回</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal 浙江省药品生产企业分布列表-->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:1020px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">浙江省药品生产企业分布列表</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:122px" />
                                    <col style="width:170px" />
                                    <col style="width:122px" />
                                    <col style="width:122px" />
                                    <col style="width:182px" />
                                    <col style="width:106px" />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>企业类型序号</td>
                                        <td>企业类型</td>
                                        <td>企业数量</td>
                                        <td>企业序号</td>
                                        <td>企业名称</td>
                                        <td>所属区域</td>
                                        <td>备注</td>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:520px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:122px" />
                                        <col style="width:170px" />
                                        <col style="width:122px" />
                                        <col style="width:122px" />
                                        <col style="width:182px" />
                                        <col style="width:106px" />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td rowspan="3">1</td>
                                            <td rowspan="3">
                                                原料药
                                            </td>
                                            <td rowspan="3">3</td>
                                            <td class="eli">
                                                1
                                                <!-- <span class="link-detail">10000</span> -->

                                            </td>

                                            <td>0</td>
                                            <td class="eli" title="云南省">
                                                云南省

                                            </td>
                                            <td class="eli" title="昆明市">
                                                昆明市

                                            </td>


                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>2</td>
                                            <td>3</td>
                                            <td>4</td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>2</td>
                                            <td>3</td>
                                            <td>4</td>
                                        </tr>

                                        <tr>
                                            <td rowspan="2">2</td>
                                            <td rowspan="2">
                                                小容量注射剂
                                            </td>
                                            <td rowspan="2">3</td>
                                            <td class="eli">
                                                1
                                                <!-- <span class="link-detail">10000</span> -->

                                            </td>

                                            <td>0</td>
                                            <td class="eli" title="云南省">
                                                云南省

                                            </td>
                                            <td class="eli" title="昆明市">
                                                昆明市

                                            </td>

                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>2</td>
                                            <td>3</td>
                                            <td>4</td>
                                        </tr>

                                        <tr>
                                            <td rowspan="3">3</td>
                                            <td rowspan="3">
                                                中药饮片
                                            </td>
                                            <td rowspan="3">3</td>
                                            <td class="eli">
                                                1
                                                <!-- <span class="link-detail">10000</span> -->

                                            </td>

                                            <td>0</td>
                                            <td class="eli" title="云南省">
                                                云南省

                                            </td>
                                            <td class="eli" title="昆明市">
                                                昆明市

                                            </td>


                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>2</td>
                                            <td>3</td>
                                            <td>4</td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>2</td>
                                            <td>3</td>
                                            <td>4</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="a-btn" data-dismiss="modal">返回</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal 地市名称+企业风险预警值列表-->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog" style="width:1380px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">地市名称+企业风险预警值列表</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:91" />
                                    <col style="width:160px" />
                                    <col style="width:111px" />
                                    <col style="width:131px" />
                                    <col style="width:170px" />
                                    <col style="width:91px" />
                                    <col style="width:140px" />
                                    <col style="width:105px" />
                                    <col style="width:105px" />
                                    <col style="width:105px" />
                                    <col style="width:105px" />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>企业序号</td>
                                        <td>企业名称</td>
                                        <td>风险预警值</td>
                                        <td>风险预警内容</td>
                                        <td>品种序号</td>
                                        <td>药品名称</td>
                                        <td>规格</td>
                                        <td>批准文号</td>
                                        <td>注册剂型</td>
                                        <td>注册分类</td>
                                        <td>是否在产</td>
                                        <td>备注</td>

                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:520px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:91" />
                                        <col style="width:160px" />
                                        <col style="width:111px" />
                                        <col style="width:131px" />
                                        <col style="width:170px" />
                                        <col style="width:91px" />
                                        <col style="width:140px" />
                                        <col style="width:105px" />
                                        <col style="width:105px" />
                                        <col style="width:105px" />
                                        <col style="width:105px" />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td> 1</td>
                                            <td>
                                                <span class="link-detail">浙江普洛康裕天然药物有限公司</span>
                                            </td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                            <td> 1</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="a-btn">导出</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal 地市名称+浙江省/地市名称/企业名称+药品生产风险-->
        <div class="modal fade" id="myModal3">
            <div class="modal-dialog" style="width:720px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">浙江省/地市名称/企业名称+药品生产风险s</h4>
                    </div>
                    <div class="modal-body">
                        <div class="pos-tit"></div>
                        <div class="modal-pie2" id="pie2" style="height: 490px; width:100%"></div>
                    </div>
                    <!-- <div class="modal-footer">
                            <button class="a-btn">导出</button>
                        </div> -->
                </div>
            </div>
        </div>

        <!-- Modal 年度预警分布统计图
        -->
        <div class="modal fade" id="myModal4">
            <div class="modal-dialog" style="width:900px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">年度预警分布统计图
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-pie2" id="line" style="height: 490px; width:100%"></div>
                    </div>
                    <!-- <div class="modal-footer">
                                    <button class="a-btn">导出</button>
                                </div> -->
                </div>
            </div>
        </div>


        <div class="global-content">

            <header class="header">
            </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="javascript:;" class="tsgz on">
                            态势感知
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qyhx.html" class="qyhx ">
                            企业画像
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./cphx.html" class="cphx">
                            产品画像
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./tdpchx.html" class="tdpchx ">
                            特定批次
                            画像
                        </a>
                    </div>

                    <div class="nav-item">
                        <a href="./scxszk.html" class="scxszk">
                            生产销售质控
                        </a>
                    </div>
                </nav>
                <div class="content-box">
                    <div class="tsgz-box clearfix">
                        <div class="tsgz-left">
                            <div class="count-statistical">
                                <table>
                                    <colgroup>
                                        <col style="width: 33.333%" />
                                        <col style="width: 33.333%" />
                                        <col />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td> <span class="count-tit">药品生产企业数</span></td>
                                            <td> <span class="count-tit">注册品种数 </span></td>
                                            <td> <span class="count-tit">在线品种数</span></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <span class="n-item">1</span>
                                                <span class="n-item">1</span>
                                                <span class="n-item">1</span>
                                                家
                                            </td>
                                            <td>
                                                <span class="n-item">1</span>
                                                <span class="n-item">1</span>
                                                <span class="n-item">1</span>
                                                个
                                            </td>
                                            <td>
                                                <span class="n-item">1</span>
                                                <span class="n-item">1</span>
                                                <span class="n-item">1</span>
                                                个
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- 饼图 -->
                            <div class="tit-pie">
                                浙江省药品生产企业分布情况
                            </div>
                            <div id="pie" style="width:100%;height:700px;"></div>

                            <div class="bottom-links">
                                <a class="links-btn" data-toggle="modal" data-target="#myModal" href="javascript:;">
                                    <img src="../src/img/tsgz/icon_stgz1@2x.png" alt="">
                                    <span>
                                        浙江省药品生产<br />企业分布列表
                                    </span>
                                </a>
                                <a class="links-btn" href="javascript:;">
                                    <img src="../src/img/tsgz/icon_stgz2@2x.png" alt="">
                                    <span>
                                        导出所有企业信息<br />导出所有品种信息
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="tsgz-right">
                            <div id="map" style="width: 100%;height:100%"></div>
                            <div class="bottom-form" id="bottom-form" style="display: none">
                                <table>
                                    <colgroup>
                                        <col style="width:122px" />
                                        <col />
                                        <col style="width:182px" />
                                        <col />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <th>时间：</th>
                                            <td> <input type="text" class="form-control" value="2019-09-01  -  2019-09-01
                                                " /> </td>
                                            <th>企业类型：</th>
                                            <td>
                                                <select name="" class="form-control" id="">
                                                    <option value="2">参考地图左侧分类</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>风险预警等级：</th>
                                            <td>
                                                <select name="" class="form-control" id="">
                                                    <option value="2">1</option>
                                                </select></td>
                                            <th>注册剂型/非制剂分类：</th>
                                            <td>
                                                <select name="" class="form-control" id="">
                                                    <option value="2">1</option>
                                                </select></td>
                                        </tr>
                                        <tr>
                                            <th>注册分类：</th>
                                            <td>
                                                <select name="" class="form-control" id="">
                                                    <option value="2">1</option>
                                                </select></td>
                                            <th></th>
                                            <td><button class="a-btn">分析</button><button class="a-btn">导出</button> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="ts-r-btn">
                                <a class="links-btn" href="javascript:;" data-toggle="modal" data-target="#myModal2">
                                    <img src="../src/img/tsgz/icon_stgz3@2x.png" alt="">
                                    <span>
                                        全省药品生产 <br />风险预警值
                                    </span>
                                </a>
                                <a class="links-btn" href="javascript:;" data-toggle="modal" data-target="#myModal3">
                                    <img src="../src/img/tsgz/icon_stgz4@2x.png" alt="">
                                    <span>
                                        区域药品生产
                                        <br /> 风险预警值
                                    </span>

                                </a>
                                <a class="links-btn" href="javascript:;" data-toggle="modal" data-target="#myModal4">
                                    <img src="../src/img/tsgz/icon_stgz5@2x.png" alt="">
                                    <span>
                                        年度预警分布

                                    </span>

                                </a>
                            </div>
                            <div class="phz">
                                <span class="txt">加权平均值 <br /> <span class="num">23</span> </span>
                            </div>
                            <button class="a-btn jstj" id="jstj-btn"> <img src="../src/img/tsgz/icon_ss@2x.png" alt="">
                                检索条件 </button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/loading.js"></script>


    <script>
        $(function () {
            $('#jstj-btn').on('click', function () {
                $('#bottom-form').show()
            })
            $('#myPrompt').modal()
            // 加载显示测试  不需要可删除
            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()

            shwoPie()
            showmap()

            $('#myModal3').on('shown.bs.modal', function (e) {
                shwoPie2()

            })
            $('#myModal4').on('shown.bs.modal', function (e) {
                chartLine()

            })


        })

        function shwoPie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pie'));
            // 指定图表的配置项和数据


            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 122,
                    data: ['疫苗', '血液制品', '生物工程产品', '大容量注射剂', '小容量注射剂', '小容量注射剂（含激素类）', '粉针剂', '冻干粉针剂', '原料药',
                        '精神药品', '药品类易制毒化学品', '医疗用毒性药品', '中药饮片'
                    ],
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'

                    }
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    center: ['43%', '46%'],
                    color: ['#FF9722', '#EB3432', '#E8EB32', '#05D168', '#40F8AC', '#9233E7',
                        '#E12770', '#2289F2', '#FDFD64', '#98E33D', '#9C1919', '#6380C7', '#C36512'
                    ],
                    data: [{
                            value: 335,
                            name: '疫苗'
                        },
                        {
                            value: 310,
                            name: '血液制品'
                        },
                        {
                            value: 234,
                            name: '生物工程产品'
                        },
                        {
                            value: 135,
                            name: '大容量注射剂'
                        },
                        {
                            value: 1548,
                            name: '小容量注射剂'
                        }, {
                            value: 1548,
                            name: '小容量注射剂（含激素类'
                        }, {
                            value: 1548,
                            name: '粉针剂'
                        }, {
                            value: 1548,
                            name: '冻干粉针剂'
                        }, {
                            value: 1548,
                            name: '原料药'
                        }, {
                            value: 1548,
                            name: '精神药品'
                        }, {
                            value: 1548,
                            name: '药品类易制毒化学品'
                        }, {
                            value: 1548,
                            name: '医疗用毒性药品'
                        }, {
                            value: 1548,
                            name: '中药饮片'
                        }

                    ],
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b} \n{d}%",
                            textStyle: {
                                fontSize: 16
                            }
                        }

                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $(window).on('resize', function () {
                myChart.resize();

            })
        }

        function shwoPie2() {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pie2'));
            // 指定图表的配置项和数据

            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    color: ['#FF9722', '#EB3432', '#E8EB32', '#05D168', '#40F8AC', '#9233E7',
                        '#E12770', '#2289F2', '#FDFD64', '#98E33D', '#9C1919', '#6380C7', '#C36512'
                    ],
                    data: [{
                            value: 335,
                            name: '监督检查'
                        },
                        {
                            value: 310,
                            name: '抽样检验'
                        },
                        {
                            value: 234,
                            name: '不良反应'
                        },
                        {
                            value: 135,
                            name: '投诉举报'
                        },
                        {
                            value: 1548,
                            name: '行政处罚'
                        }, {
                            value: 1548,
                            name: '企业信用'
                        }, {
                            value: 1548,
                            name: '个人信用'
                        }, {
                            value: 1548,
                            name: '舆情监测'
                        }

                    ],
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b} \n{d}%",
                            textStyle: {
                                fontSize: 16
                            }
                        }

                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $(window).on('resize', function () {
                myChart.resize();

            })
        }

        function showmap() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map'));
            // 指定图表的配置项和数据


            /**
             此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

             默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
             当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

             http://echarts.baidu.com/option.html#series-map.geoIndex

             并且加了pin气泡图标以示数值大小
             */

            myChart.showLoading();
            $.getJSON('../src/js/zj.json', function (geoJson) {
                echarts.registerMap('zj', geoJson);
                myChart.hideLoading();
                var option = {
                    geo: {
                        show: true,
                        map: 'zj',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: '#EE6363',
                                borderWidth: 5,
                                borderColor: '#00C0FF',
                                shadowColor: '#00C0FF', // 边框阴影颜色
                                shadowBlur: 50
                            }
                        }
                    },
                    legend: {

                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.data.name.concat('<br/>').concat('生产企业数' + params
                                    .data.value)
                                .concat('<br/>' + '生产品种数' + params.data.value2).concat('<br/>' +
                                    '区域风险预警值：' + params.data.value3)
                        },
                        textStyle: {
                            fontSize: '100%'
                        }
                    },

                    visualMap: {
                        show: false,
                        min: 0,
                        // max: 500,
                        inRange: {
                            color: ['#0A0D49', '#025ED4']
                        },

                    },


                    series: [{
                            type: 'map',
                            map: 'zj',


                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '100%'
                                    }
                                },
                            },
                            roam: false,
                            animation: false,
                            itemStyle: {
                                normal: {
                                    color: '#05C3F9',
                                    areaColor: '#031525',
                                    shadowBlur: 2,
                                    borderColor: '#00C0FF',
                                    shadowColor: '#05C3F9',

                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            data: [{
                                name: '杭州市',
                                value: 1232,
                                value2: 23,
                                value3: 12
                            }]
                        }

                    ]
                };
                myChart.setOption(option);
                $(window).on('resize', function () {
                    myChart.resize()
                })
            });

            // 使用刚指定的配置项和数据显示图表。


        }

        function chartLine() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line'));
            // 指定图表的配置项和数据

            var lableList = ['2016年', '2017年', '2018年']
            var legendData = ['全省', '杭州', '宁波', '嘉兴', '湖州', '金华', '温州', '丽水', '衢州', '绍兴', '台州', '舟山']

            var dataList = [
                [1, 20, 160],
                [2, 30, 60],
                [3, 60, 130],
                [4, 130, 160],
                [5, 830, 180],
                [6, 230, 120],
                [7, 130, 160],
                [8, 30, 10],
                [9, 10, 160],
                [10, 20, 90],
                [11, 90, 170],
                [12, 130, 160]

            ]
            var option = {
                color: ['#F8E71C', '#00C601', '#BD10E0', '#52FFFD', '#BCEB4D', '#F5A623', '#E75656', '#5C13FE',
                    '#669F2B', '#AA671D', '#2289F2', '#E82177'
                ],
                grid: {
                    left: 80,
                    top: 100,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：个',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10,
                    top: 40
                },
                legend: {
                    data: legendData,
                    top: 30,

                    left: 150,
                    right: 150,
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: dataList.map(function (item, index) {
                    var a = {
                        name: legendData[index],
                        type: 'line',
                        data: dataList[index],
                        // symbol: 'circle', //
                        symbolSize: 12
                    }
                    return a


                })



                // [{
                //     name: '全省',
                //     type: 'line',
                //     data: dataList[0],
                //     // symbol: 'circle', //
                //     symbolSize: 12
                // }, {
                //     name: '杭州',
                //     type: 'line',
                //     data: dataList[1],
                //     symbolSize: 12
                // }, ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }
    </script>

</body>

</html>